<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 出库 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/icons-extra.css">
    <link rel="stylesheet" href="css/app.css">
    <style type="text/css">
        #supplier-box ul {
            background: #fff
        }

        #supplier-box ul li {
            padding: 11px 13px;
        }

        #supplier-box ul li .mui-media-body {
            font-size: 12px;
        }

        /* .mui-input-row label{ text-align: right; } */

        .mui-input-row-textarea {
            height: initial !important
        }

        #mui-card-form .mui-card-footer {
            justify-content: flex-end;
        }

        #guige-boxSize input {
            width: 21.3333%;
            font-size: 14px;
        }

        #warehouse-click .mui-input-row {
            font-size: 13px;
        }

        #warehouse-click .mui-input-row input {
            font-size: 12px;
        }

        #warehouse-out-add {
            text-align: center;
        }
 
    </style>
    <link rel="stylesheet" href="./css/guige.css">
    <script src="js/jquery.min.js"></script>
    <script src="./js/layer.js"></script>
</head>

<body>
    <header id="header" class="mui-bar mui-bar-nav">

        <h1 class="mui-title"> 出库单 </h1>
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">保存</button>
    </header>

    <div class="mui-content">
        <div class="mui-card">
            <div class="mui-input-group mui-card-content">
                <div class="mui-input-row">
                    <label> 单据编号：</label>
                    <input type="text" class="mui-input-clear" disabled value="XS1787976980">
                </div>

                <div class="mui-input-row" id="guige-boxSize">
                    <label>出库类型</label>
                    <select class="mui-input-clear">
                        <option value="国内出库" selected>国内出库</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>港口：</label>
                    <input type="text" class="mui-input-clear " placeholder="港口">
                </div>
                <div class="mui-input-row">
                    <label> 集装箱编号：</label>
                    <input type="text" class="mui-input-clear " placeholder="集装箱编号">
                </div>
                <div class="mui-input-row">
                    <label> 体积：</label>
                    <input type="text" class="mui-input-clear " placeholder="体积">
                </div>
                <div class="mui-input-row">
                    <label> 时间：</label>
                    <input type="text" class="mui-input-clear " placeholder="时间">
                </div>
                <div class="mui-input-row">
                    <label> 总金额：</label>
                    <input type="text" class="mui-input-clear f00" disabled value="12000.00">
                </div>
                <div class="mui-input-row mui-input-row-textarea">
                    <label>备注</label>
                    <textarea id="textarea" rows="2" placeholder=""></textarea>
                </div>
            </div>
        </div>



        <div class="" id="guige-add-list">
            <table class="table-style">
                <thead>
                    <tr>
                        <th>货品编号</th>
                        <th>货品箱规格</th>
                        <th>数量（箱）</th>
                        <th>仓位</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> s001 </td>
                        <td> ***** </td>
                        <td>
                            <input type="text" value="20">
                        </td>
                        <td> 一仓 </td>
                        <td>
                            <a> 移除 </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mui-content-padded" id="warehouse-out-add">
            <a class="mui-btn mui-btn-primary"> 点击添加货品 </a>
            <a class="mui-btn mui-btn-danger"> 计算汇总 </a>
        </div>

        <div class="" id="warehouse-out-tot">
            <table class="table-style">
                <thead>
                    <tr>
                        <th>货品编号</th>
                        <th>箱数</th>
                        <th>件数</th>
                        <th>体积</th>
                        <th>金额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> s001 </td>
                        <td> 1200 </td>
                        <td> 130000 </td>
                        <td> 10 </td>
                        <td> 90000.00 </td>
                    </tr>
                </tbody>
            </table>
        </div>


    </div>



    <!-- 底部导航 -->
    <nav class="mui-bar mui-bar-tab" id="bar-down">

        <div class="mui-tab-item mui-active" data-href="./index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </div>
        <div class="mui-tab-item" data-href="./sales.html">
            <span class="mui-icon mui-icon-star"> </span>
            <span class="mui-tab-label">销售管理</span>
        </div>
        <div class="mui-tab-item" data-href="./procurement.html">
            <span class="mui-icon mui-icon-download"> </span>
            <span class="mui-tab-label">采购管理</span>
        </div>
        <div class="mui-tab-item" data-href="./warehouse.html">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="mui-tab-label">仓库管理</span>
        </div>
        <div class="mui-tab-item" data-href="./basis.html">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">基础管理</span>
        </div>
    </nav>
 
    <!-- 弹出层 -->
    <div id="guige-boxNumber" style="display:none">
        <div class="title"> 选择货品 </div>
        <div class="select-pro-list">
            <span>
                <select name="" id="">
                    <option value="">男鞋</option>
                    <option value="">女鞋</option>
                </select>
            </span>
            <span>
                <select name="" id="">
                    <option value="">产品1</option>
                    <option value="">产品2</option>
                </select>
            </span>
        </div>
        <div id="select-pro-list-box">
            <div class="select-pro-li  ">
                <div class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="Item 1" type="checkbox">
                        <label>
                            <div class="mui-ellipsis">
                                货品编号：
                                <span>s001</span>&nbsp;&nbsp;&nbsp;&nbsp;货品箱规格：
                                <span>s001</span>
                            </div>
                            <div class="mui-ellipsis">
                                库存数量：
                                <span>1000</span>&nbsp;&nbsp;&nbsp;&nbsp;仓库位：
                                <span>一仓</span>
                            </div>
                            <div class="mui-ellipsis">
                                转出数量：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="88">
                                </span>
                            </div>
                        </label>
                </div> 
            </div>
            <div class="select-pro-li  ">
                <div class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="Item 1" type="checkbox">
                        <label>
                            <div class="mui-ellipsis">
                                货品编号：
                                <span>s001</span>&nbsp;&nbsp;&nbsp;&nbsp;货品箱规格：
                                <span>s001</span>
                            </div>
                            <div class="mui-ellipsis">
                                库存数量：
                                <span>1000</span>&nbsp;&nbsp;&nbsp;&nbsp;仓库位：
                                <span>一仓</span>
                            </div>
                            <div class="mui-ellipsis">
                                转出数量：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="88">
                                </span>
                            </div>
                        </label>
                </div> 
            </div>
            <div class="select-pro-li  ">
                <div class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="Item 1" type="checkbox">
                        <label>
                            <div class="mui-ellipsis">
                                货品编号：
                                <span>s001</span>&nbsp;&nbsp;&nbsp;&nbsp;货品箱规格：
                                <span>s001</span>
                            </div>
                            <div class="mui-ellipsis">
                                库存数量：
                                <span>1000</span>&nbsp;&nbsp;&nbsp;&nbsp;仓库位：
                                <span>一仓</span>
                            </div>
                            <div class="mui-ellipsis">
                                转出数量：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="88">
                                </span>
                            </div>
                        </label>
                </div> 
            </div>
            <div class="select-pro-li  ">
                <div class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="Item 1" type="checkbox">
                        <label>
                            <div class="mui-ellipsis">
                                货品编号：
                                <span>s001</span>&nbsp;&nbsp;&nbsp;&nbsp;货品箱规格：
                                <span>s001</span>
                            </div>
                            <div class="mui-ellipsis">
                                库存数量：
                                <span>1000</span>&nbsp;&nbsp;&nbsp;&nbsp;仓库位：
                                <span>一仓</span>
                            </div>
                            <div class="mui-ellipsis">
                                转出数量：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="88">
                                </span>
                            </div>
                        </label>
                </div> 
            </div>
            <div class="select-pro-li  ">
                <div class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="Item 1" type="checkbox">
                        <label>
                            <div class="mui-ellipsis">
                                货品编号：
                                <span>s001</span>&nbsp;&nbsp;&nbsp;&nbsp;货品箱规格：
                                <span>s001</span>
                            </div>
                            <div class="mui-ellipsis">
                                库存数量：
                                <span>1000</span>&nbsp;&nbsp;&nbsp;&nbsp;仓库位：
                                <span>一仓</span>
                            </div>
                            <div class="mui-ellipsis">
                                转出数量：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="88">
                                </span>
                            </div>
                        </label>
                </div> 
            </div>
  
  

        </div>
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="sales-submit"> 确认添加 </button>
    </div>

    <div class="jxc-mask"></div>
    <!-- 弹出层 -->
    <script src="js/mui.min.js"></script>
    <script src="js/song.js"></script>
    <script>
    
        //  展开选择框
        $("#warehouse-out-add").on("click", "a.mui-btn-primary", function () {
            showBOX()
        }) 
        //  隐藏选择框
        $(".jxc-mask").on("click", function () {
            hideBOX()
        })

        mui.init({});
      /*   $(".select-pro-li").on("click", function () { 
            $(this).toggleClass("select-pro-li-on"); 
        }); */
        // 底部导航 链接
        mui("#bar-down").on("tap", "div", function () {
            var href = this.getAttribute("data-href");
            if (href !== "") {
                gotoUrl(href);
                return;
            }
        }, false);
    </script>
</body>

</html>